<!-- 工业互联网 -->
<template>
  <div class="mes-container">
    <div class="containerBox">
      <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
      <!-- 头部 -->
      <all-title ref="allTitle" :comp-info="compInfo" :title-name="titleName" />
      <div class="contentBox allStyleCont">
        <!-- 左边 -->
        <div class="leftBox fl">
          <div class="threeBox allBoxStyle">
            <div class="boxWidthHeight">
              <img class="imgLeft" src="../../../assets/images/bianLeft.png" />
              <img class="imgRight" src="../../../assets/images/bianRight.png" />
              <div class="boxContent">
                <h1>企业运行实况</h1>
                <left-top-six ref="leftTopSix" />
              </div>
            </div>
          </div>
          <div class="threeBox allBoxStyle">
            <div class="boxWidthHeight">
              <img class="imgLeft" src="../../../assets/images/bianLeft.png" />
              <img class="imgRight" src="../../../assets/images/bianRight.png" />
              <div class="boxContent">
                <h1>周产量趋势图</h1>
                <left-center-line ref="leftCenterLine" />
              </div>
            </div>
          </div>
          <div class="threeBox allBoxStyle">
            <div class="boxWidthHeight">
              <img class="imgLeft" src="../../../assets/images/bianLeft.png" />
              <img class="imgRight" src="../../../assets/images/bianRight.png" />
              <div class="boxContent">
                <h1>设备累计运行时间</h1>
                <left-bottom-line ref="leftBottomLine" :left-bottom-data="leftBottomData" />
              </div>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="centerBox fl">
          <div class="fourBox">
            <div class="fourLeftBox fl">
              <div class="fourTwoBox allBoxStyle">
                <div class="boxWidthHeight">
                  <img class="imgLeft" src="../../../assets/images/bianLeft.png" />
                  <img class="imgRight" src="../../../assets/images/bianRight.png" />
                  <div class="boxContent">
                    <h1>设备状态</h1>
                    <center-top-echarts ref="centerTopEcharts" />
                  </div>
                </div>
              </div>
              <div class="fourTwoBox allBoxStyle">
                <div class="boxWidthHeight">
                  <img class="imgLeft" src="../../../assets/images/bianLeft.png" />
                  <img class="imgRight" src="../../../assets/images/bianRight.png" />
                  <div class="boxContent">
                    <h1>异常信息</h1>
                    <center-pie-and-tab ref="centerPieAndTab" />
                  </div>
                </div>
              </div>
            </div>
            <div class="fourRightBox fl">
              <div class="fourTwoBox allBoxStyle">
                <div class="boxWidthHeight">
                  <img class="imgLeft" src="../../../assets/images/bianLeft.png" />
                  <img class="imgRight" src="../../../assets/images/bianRight.png" />
                  <div class="boxContent">
                    <h1>全厂联网设备监控</h1>
                    <rigtht-echarts-pie ref="rigthtEchartsPie" />
                  </div>
                </div>
              </div>
              <div class="fourTwoBox allBoxStyle">
                <div class="boxWidthHeight">
                  <img class="imgLeft" src="../../../assets/images/bianLeft.png" />
                  <img class="imgRight" src="../../../assets/images/bianRight.png" />
                  <div class="boxContent">
                    <h1>设备报警信息</h1>
                    <right-tab ref="rightTab" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="rightBottomTab">
            <div class="bottomBox allBoxStyle">
              <div class="boxWidthHeight">
                <img class="imgLeft" src="../../../assets/images/bianLeft.png" />
                <img class="imgRight" src="../../../assets/images/bianRight.png" />
                <div class="boxContent">
                  <h1>订单实况采集</h1>
                  <center-bottom-tab ref="centerBottomTab" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { bgFun } from '../../../bg.js'
import allTitle from '../components/allTitle'
import leftTopSix from './components/leftTopSix'
import leftCenterLine from './components/leftCenterLine'
import leftBottomLine from './components/leftBottomLine'
import centerBottomTab from './components/centerBottomTab'
import centerPieAndTab from './components/centerPieAndTab'
import rightTab from './components/rightTab'
import rigthtEchartsPie from './components/rigthtEchartsPie'
import centerTopEcharts from './components/centerTopEcharts'
export default {
  name: 'EqMaintenance',
  components: {
    allTitle,
    leftTopSix,
    leftCenterLine,
    leftBottomLine,
    centerBottomTab,
    centerPieAndTab,
    rightTab,
    rigthtEchartsPie,
    centerTopEcharts
  },
  data() {
    return {
      titleName: '工业互联网数据看板',
      leftBottomData: []
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  async mounted() {
    const loading = this.$loading({
      lock: true,
      text: '数据加载中...', // 数据加载中...
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(async () => {
      loading.close()
      bgFun()
    }, 500)
    this.getInfo()
    /* 根据浏览器收缩echarts重铸 */
    window.onresize = () => {
      if (this.$refs['leftCenterLine'].myChart)
        this.$refs['leftCenterLine'].infoSize()
      if (this.$refs['centerPieAndTab'].myChart)
        this.$refs['centerPieAndTab'].infoSize()
      if (this.$refs['rigthtEchartsPie'].myChart)
        this.$refs['rigthtEchartsPie'].infoSize()
      if (this.$refs['centerTopEcharts'].myChart)
        this.$refs['centerTopEcharts'].infoSize()
      if (this.$refs['leftBottomLine'].myChart)
        this.$refs['leftBottomLine'].infoSize()
    }
  },
  beforeDestroy() {},
  methods: {
    getInfo() {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...', // 数据加载中...
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(async () => {
        loading.close()
        await this.$refs['leftTopSix'].getSixInfo()
        await this.$refs['leftCenterLine'].getWeekYield()
        await this.$refs['leftBottomLine'].getEquipRunStat()
        await this.getEquipWorkStatus()
        await this.$refs['rightTab'].getTabInfo()
        await this.$refs['centerPieAndTab'].getInfo()
        await this.$refs['centerBottomTab'].getTabInfo()
      }, 1000)
    },
    /* 获取设备状态 */
    async getEquipWorkStatus() {
      this.$refs['centerTopEcharts'].getEquipStatus()
      this.$refs['rigthtEchartsPie'].getEquipStatus()
    }
  }
}
</script>
<style lang='scss' scoped>
.mes-container {
  position: fixed;
  z-index: 999999 !important;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  height: 100%;
  width: 100%;
  background: radial-gradient(hwb(221 0% 34%) 20%, #001439 70%);
  background-size: 100% 100%;
  min-width: 1100px;
  min-height: 620px;
  .containerBox {
    position: relative;
    height: 100%;
    .contentBox {
      position: absolute;
      top: 70px;
      height: calc(100% - 70px);
      width: 100%;
      overflow: hidden;
      .allBoxStyle {
        padding: 10px;
        .boxWidthHeight {
          position: relative;
          padding: 3px;
          width: 100%;
          height: 100%;
          img {
            width: auto;
            height: calc(100% - 5px);
          }
          .imgLeft {
            position: absolute;
            left: 0;
          }
          .imgRight {
            position: absolute;
            right: 0;
          }
          .boxContent {
            width: 100%;
            height: 100%;
            border: 1px solid #1d9cd4;
            box-shadow: inset 0 0 15px rgba(49, 168, 255, 0.5);
            h1 {
              width: calc(100% - 20px);
              height: 30px;
              position: relative;
              top: 0;
              left: 5px;
              color: white;
              padding-left: 16px;
              line-height: 30px;
              font-size: 18px;
            }
            h1:before {
              width: 4px;
              height: 20px;
              top: 5px;
              position: absolute;
              content: '';
              background: #2997e4;
              border-radius: 2px;
              left: 5px;
            }
            .contentNei {
              height: calc(100% - 65px);
            }
          }
        }
      }

      .threeBox {
        width: 100%;
        height: 33.3333%;
      }
      .leftBox {
        height: 100%;
        width: 25%;
      }
      .centerBox {
        height: 100%;
        width: 75%;
        .fourBox {
          height: 66.6666%;
          .fourTwoBox {
            height: 50%;
            width: 100%;
          }
          .fourLeftBox {
            width: 65%;
            height: 100%;
          }
          .fourRightBox {
            width: 35%;
            height: 100%;
          }
        }
        .rightBottomTab {
          width: 100%;
          height: 33.3333%;
          .bottomBox {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
